<template>
  <view :style="themeStore.themeStyle" class="index" @touchmove="popupShow = true" @touchend="popupShow = false">
    <view class="main-header">
      <view class="logo flex flex-center">
        <image src="/static/images/index_logo.png" mode="aspectFit" class="main-header-title-logo"></image>
      </view>
      <view class="slogan">
        <view class="font-size-48 m-b-10">{{ $t('title.welcome_to_use') }}</view>
        <view class="font-size-48">{{ $t('title.intelligent_supply_chain_platform') }}</view>
      </view>
    </view>
    <view class="main-body">
      <view class="body-icon">
        <image src="/static/icons/order_delivery.png" mode="aspectFit" class="order_delivery_icon"></image>
      </view>
      <view class="m-b-10 f-w-600 font-size-48">{{ $t('icon_name.order_delivery') }}</view>
      <view class="m-b-20 font-size-28 font-color-8F9295">{{ $t('tips.delivery_order_status_update') }}</view>
      <view class="distribution-btn">
        <up-button @click="gotoCardPage" type="primary" :text="$t('button.access_distribution_center')"></up-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getApiPermission } from '@/api/app'
import { route } from 'uview-plus'
let popupShow = ref(false)
// 跳转配送订单列表
const getPermissionList = () => {
  const params = {
    com_id: 6,
    id: 6,
    person_id: '1101'
  }
  getApiPermission(params).then((res: any) => {
    console.log(res)
  })
}
const gotoCardPage = (item: any) => {
  route({
    url: '/pages_order_delivery/list/list',
    params: {
      name: '测试值'
    }
  })
}
onMounted(() => {
  getPermissionList()
})

// 主题更新
import { useThemeStore } from '@/store/modules/theme'
const themeStore = useThemeStore()
onShow(() => {
  themeStore.initTheme()
})
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  //后续加功底部导航栏去除
  box-sizing: border-box;
  overflow: hidden;
}
.index {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  .main-header {
    background-color: $color-primary-light-1;
    .logo{
      padding: 100rpx 164rpx 0rpx 164rpx;
    }
    .main-header-title-logo {
      width: 423rpx;
      height: 410rpx;
    }
    .slogan {
      margin: 20rpx 0 0 60rpx;
      padding-bottom: 100rpx;
    }
  }
  .main-body {
    transform: translateY(-5%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    background-color: #ffffff;
    border-radius: 50rpx 50rpx 0 0;
    .order_delivery_icon {
      width: 240rpx;
      height: 240rpx;
    }
    .font-color-8F9295 {
      color: #8f9295;
    }
    .distribution-btn {
      width: 60%;
    }
  }
}
</style>
